<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:comp="http://java.sun.com/jsf/composite/ezcomp"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="/template.xhtml">
        <ui:define name ="title">
            <h:outputText value="BrainStretch | #{userController.user.name}'s Profile"/>
        </ui:define>
        <ui:define name ="body">
        <p:tabView>
            <p:tab title ="Main">
            <div id ="titleBar">
                <h:outputText value="#{userController.user.name}"/>
            </div>
            
            </p:tab>
            <p:tab title ="Stats">
                <h:panelGroup rendered="#{userController.user != null}">
                <SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT>
                <script>
                    var app = new dtjava.App(
                        '#{request.contextPath}/main/app/AnalyticsApp.jnlp',
                            {
                                id: 'statsApp',
                                width: 800,
                                height: 600,
                                params: { 'user':'#{userController.user.name}', 'serviceURI':'http://localhost:8080/BrainStretch-war/resources/stats'},
                                placeholder:'statsApp'                          
                            }
                    );
                    function javafxEmbed() {
                        dtjava.embed(
                            app, {javafx : '2.0+'},{}
                        );
                    }
                    <!-- Embed FX application into web page once page is loaded -->
                    dtjava.addOnloadCallback(javafxEmbed);
                </script>
                <div id='statsApp' class="centeredMargin"></div>
                </h:panelGroup>
                <div id="secondaryStats">
                <div class="statChart" rendered ="#{!statsController.chartModel.getData().isEmpty()}">
                <p:pieChart value ="#{statsController.chartModel}" legendPosition="w"/>
                </div>
                <h3 class ="statLabel">Record</h3>
                <ui:repeat value="#{statsController.statuses}" var="status">
                    <div class ="statLine">
                    <h:outputText value="#{status}: #{statsController.getStatusCount(status)}"/>
                    </div>
                </ui:repeat>
                </div>
            </p:tab>
        </p:tabView>
        </ui:define>
    </ui:composition>
</html>
